import styled from "styled-components";

import progress_bar from "@/assets/img/progress_bar.png";
import sprite_icon from "@/assets/img/sprite_icon.png";

export const PlayerWrapper = styled.div`
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background-position: 0 0;
  background-repeat: repeat;
`;

export const PlayerContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 47px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
`;

export const PlayerControlBox = styled.div`
  display: flex;
  align-items: center;

  .prev,
  .next {
    width: 28px;
    height: 28px;
  }
  .prev {
    background-position: 0 -130px;
  }
  .next {
    background-position: -80px -130px;
  }
  .play {
    width: 36px;
    height: 36px;
    margin: 0 8px;
    background-position: 0 -204px;
  }
`;

export const PlayerProgressBox = styled.div`
  display: flex;
  align-items: center;

  .songImg {
    width: 34px;
    height: 34px;
    border-radius: 5px;
  }

  .info {
    margin-left: 10px;
  }

  .song {
    color: #e1e1e1;
    position: relative;
    top: 8px;
    left: 8px;
  }

  .artist {
    color: #a1a1a1;
    margin-left: 10px;
  }

  .progress {
    width: 493px;
  }

  .ant-slider {
    .ant-slider-track {
      height: 9px;
      background: url(${progress_bar}) left -66px;
    }

    .ant-slider-rail {
      height: 9px;
      background: url(${progress_bar}) right 0;
    }

    .ant-slider-handle {
      width: 22px;
      height: 24px;
      border: none;
      margin-top: -7px;
      background: url(${sprite_icon}) 0 -250px;
    }
  }

  .time {
    color: #a1a1a1;
    position: relative;
    top: 10px;
    left: 5px;
  }

  .now-time {
    color: #e1e1e1;
  }

  .divider {
    margin: 0 3px;
  }
`;
